<template>
  <div>
    <a-card>
      <a-form-model ref="transForm" :rules="transFormRules" :model="queryInterface">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="交易名称" prop="transName" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
              <a-input v-model="queryInterface.transName" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              label="业务系统交易码"
              prop="transCode"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 8 }"
            >
              <a-input v-model="queryInterface.transCode" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-tabs type="card">
          <a-tab-pane key="0">
            <span slot="tab"><a-icon type="pushpin" />原始接口-输入</span>
            <a-table :columns="inputColumns" :data-source="inputData" :scroll="{ x: 1500 }">
              <a-checkbox slot="inputFlag" slot-scope="text" :defaultChecked="text"></a-checkbox>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="1">
            <span slot="tab"><a-icon type="pushpin" />原始接口-输出</span>
            <a-table :columns="columns" :data-source="outputData" :scroll="{ x: 1500 }"> </a-table>
          </a-tab-pane>
          <a-tab-pane key="2">
            <span slot="tab"><a-icon type="pushpin" />原始接口-表对象</span>
            <a-table :columns="columns" :data-source="arrayObjectData" :scroll="{ x: 1500 }"> </a-table>
          </a-tab-pane>
        </a-tabs>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="查询SQL语句" prop="querySql" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
              <a-textarea v-model="queryInterface.querySql" :rows="2" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
export default {
  name: 'queryInterfaceTab',
  props: {
    trans: {
      type: Object
    }
  },
  data() {
    return {
      queryInterface: this.trans,
      inputData: this.trans.input,
      outputData: this.trans.output,
      arrayObjectData: this.trans.arrayObject,
      inputColumns: [
        { title: '英文名称', dataIndex: 'enName', width: 120, scopedSlots: { customRender: 'enName' } },
        { title: '中文名称', dataIndex: 'cnName', width: 120, scopedSlots: { customRender: 'cnName' } },
        { title: '数据类型', dataIndex: 'dataType', width: 150, scopedSlots: { customRender: 'dataType' } },
        { title: '是否必输', dataIndex: 'inputFlag', width: 120, scopedSlots: { customRender: 'inputFlag' } },
        { title: '查询逻辑', dataIndex: 'queryLogic', width: 800, scopedSlots: { customRender: 'queryLogic' } }
      ],
      columns: [
        { title: '英文名称', dataIndex: 'enName', width: 120, scopedSlots: { customRender: 'enName' } },
        { title: '中文名称', dataIndex: 'cnName', width: 120, scopedSlots: { customRender: 'cnName' } },
        { title: '数据类型', dataIndex: 'dataType', width: 150, scopedSlots: { customRender: 'dataType' } },
        { title: '查询逻辑', dataIndex: 'queryLogic', width: 300, scopedSlots: { customRender: 'queryLogic' } }
      ],
      transFormRules: {
        transName: [{ required: true, message: '交易名不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    trans(newVal) {
      this.queryInterface = newVal
      this.inputData = newVal.input
      this.outputData = newVal.output
      this.arrayObjectData = newVal.arrayObject
    }
  },
  methods: {
    validateTrans() {
      let flag
      this.$refs.transForm.validate(valid => {
        if (valid) {
          flag = '-1'
        } else {
          flag = '0'
        }
      })
      return flag
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';
.ant-table-thead > tr > th {
  text-align: center;
}
.ant-table-tbody > tr > td {
  text-align: center;
}
.ant-table-wrapper {
  margin-top: 20px;
}
.ant-pagination {
  margin-top: 20px;
  float: right;
}
</style>
